<template>
  <el-popover :visible="visible" placement="left" :width="400" trigger="click">
    <template #reference>
      <div class="inline-block">
        <el-tooltip
          :content="t('reviewJudgeScene.resultConfirm.confirmedNotOperable')"
          :disabled="!disabled"
          effect="dark"
          placement="left"
        >
          <el-button :disabled="disabled" link type="primary" @click="open">
            {{ btnName }}
          </el-button>
        </el-tooltip>
      </div>
    </template>
    <div v-loading="loading">
      <template v-if="selectType === 'RADIO'">
        <el-radio-group v-model="selectValue">
          <div class="flex flex-col gap-5px">
            <el-radio
              v-for="(option, index) in selectOptions"
              :key="index"
              :value="option.value"
              :disabled="option.isDisable"
            >
              <div class="flex items-center gap-8px">
                <div>
                  <span>{{ option.label }}</span>
                  <span class="text-#888 ml-5px"
                    >{{ t('reviewJudgeScene.reviewVote.remaining') }}: {{ option.remaining }}</span
                  >
                </div>
                <div v-if="option.isDisable" class="flex items-center gap-3px">
                  <Icon icon="ep:warning-filled" :size="12" color="#E6A23C" />
                  <span class="text-12px">{{ option.disableReason }}</span>
                </div>
              </div>
            </el-radio>
          </div>
        </el-radio-group>
      </template>
      <template v-else-if="selectType === 'SELECT'">
        <el-select v-model="selectValue" :placeholder="t('common.selectTextPlaceholder')">
          <el-option
            v-for="(option, index) in selectOptions"
            :key="index"
            :label="option.label"
            :value="option.value"
            :disabled="option.isDisable"
          >
            <div class="flex items-center gap-8px">
              <div>
                <span>{{ option.label }}</span>
                <span class="text-#888 ml-5px"
                  >{{ t('reviewJudgeScene.reviewVote.remaining') }}: {{ option.remaining }}</span
                >
              </div>
              <div v-if="option.isDisable" class="flex items-center gap-3px">
                <Icon icon="ep:warning-filled" :size="12" color="#E6A23C" />
                <span class="text-12px">{{ option.disableReason }}</span>
              </div>
            </div>
          </el-option>
        </el-select>
      </template>
    </div>
    <div class="mt-16px text-right">
      <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
      <el-button
        type="primary"
        :disabled="selectValue === undefined || selectValue === null"
        :loading="loading"
        @click="submitForm"
        >{{ t('common.ok') }}</el-button
      >
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { CandidateJudgesRespVO, OptionVO, ReviewSceneApi } from '@/api/awards/reviewscene'

defineOptions({ name: 'VotePopover' })
const props = defineProps<{
  row: CandidateJudgesRespVO
  btnName: string
  disabled: boolean
}>()

const { t } = useI18n() // 国际化
const message = useMessage() // 消息提示

const visible = ref(false) // 弹窗是否可见
const loading = ref(false)
const selectType = ref<'RADIO' | 'SELECT'>() // 投票类型
const selectOptions = ref<OptionVO[]>([]) // 投票选项
const selectValue = ref() // 投票值

watch(visible, (newVal) => {
  if (!newVal) {
    selectValue.value = undefined
  } else if (!selectType) {
    getOptions()
  }
})

const emits = defineEmits(['success'])
// 提交表单
const submitForm = async () => {
  if (!props.row || selectValue.value === undefined || selectValue.value === null) return
  loading.value = true
  try {
    await ReviewSceneApi.submitVote({
      awardsInstanceId: props.row.awardId,
      awardsCandidateId: props.row.id,
      value: selectValue.value
    })
    visible.value = false
    emits('success')
    message.success(t('common.operSuccess'))
  } finally {
    loading.value = false
  }
}

// 获取选项
const getOptions = async () => {
  if (!props.row) return
  loading.value = true
  try {
    const data = await ReviewSceneApi.getVoteOptions(props.row.awardId, props.row.id)
    selectType.value = data.type
    selectOptions.value = data.options
  } catch {
    visible.value = false
  } finally {
    loading.value = false
  }
}

const open = () => {
  visible.value = !visible.value
  getOptions()
}
</script>

<style scoped lang="scss"></style>
